<html>
<head>
<style>

pre {
	width:100%;
	border-style:solid;
}

div iframe {
	width: 100%;
	height: 100%;
}

</style>
<script src="http://www.feedgraph.com/js/feedgraph.js"></script>
<script>

	current = null;
	paneSrc = null;
	paneText = null;
	querySrc = null;

function editorKeyUp(event) {

	var sel = window.getSelection();
	if (sel == null) return;

	if (sel.rangeCount == 0) return;

	var range = sel.getRangeAt(0);

	if (range.collapsed) return;

	selection = sel.toString();

	event.preventDefault();
	
	if (event.charCode == "d".charCodeAt(0)) {
		sel.deleteFromDocument();
	} else if (event.charCode == "e".charCodeAt(0)) {
		result = eval(selection);

		console.log(result);

		if (result && result.toString) result = result.toString();

		if (result) {
			disp(result);
		}
	}
	
	return false;
}

function editorDblClick() {

	var sel = window.getSelection();
	if (sel == null) return;

	if (sel.rangeCount == 0) return;

	var range = sel.getRangeAt(0);

	if (range.collapsed) return;

	selection = sel.toString();

	var f = eval(selection);

	f();
}

function put() {

	var req = new XMLHttpRequest (); 
	req.open ('PUT', paneSrc, true);

	req.onreadystatechange = function (aEvt) {
	if (req.readyState == 4) { 
		if (req.status == 200) { 
			result = req.responseText; 

			console.log(result);

			if (result && result.length > 0) disp(req.responseText);
		}
		else 
			disp("Error sending document [close]");
		}
	};

	req.send(paneText.innerText);
}

function get(src) {

	if (src == null) {
		src = querySrc;
	}

	if (src == null) {
		src = prompt("URL");
	}

	if (src == null) return;

	var req = new XMLHttpRequest (); 
	req.open ('GET', src, true);

	req.onreadystatechange = function (aEvt) {
	if (req.readyState == 4) { 
		if (req.status == 200) 
			pane (src, req.responseText); 
		else 
			disp("Error loading document [close]"); 
		}
	};

	req.send(null);
}

function preview(src) {

	if (src == null) {
		src = paneSrc;
	}

	if (src == null) {
		src = querySrc;
	}

	if (src == null) {
		src = prompt("URI");
	}

	if (src == null) return;

	var div = document.createElement("div");

	var button = document.createElement("button");
	button.textContent="x";
	button.addEventListener("click", function() {current = div; close();});
	div.appendChild(button);

	var label = document.createElement("label");
	label.textContent = "previewing " + src;
	div.appendChild(label);
	div.appendChild(document.createElement("br"));

	var pre = document.createElement("iframe");
	div.appendChild(pre);

	document.body.appendChild(div);

	var callback = function (entry) {
		pre.src = src;
	}

	var watcher = feedgraph.watch(src, callback, true);
}

function watch(src) {

	if (src == null) {
		src = paneSrc;
	}

	if (src == null) {
		src = querySrc;
	}

	if (src == null) {
		src = prompt("URI");
	}

	if (src == null) return;

	var div = document.createElement("div");

	var button = document.createElement("button");
	button.textContent="x";
	button.addEventListener("click", function() {current = div; close();});
	div.appendChild(button);

	var label = document.createElement("label");
	label.textContent = "watching " + src;
	div.appendChild(label);
	div.appendChild(document.createElement("br"));

	var pre = document.createElement("pre");
	div.appendChild(pre);

	document.body.appendChild(div);

	var callback = function (entry) {
		var req = new XMLHttpRequest (); 
		req.open ('GET', src, true);

		req.onreadystatechange = function (aEvt) {
		if (req.readyState == 4) { 
			if (req.status == 200) 
				pre.textContent = req.responseText;
			else 
				pre.textContent = "Error watching document [close]";
			}
		};

		req.send(null);
	}

	var watcher = feedgraph.watch(src, callback, true);
}

function help() {

	get("help.txt");
}

function init () {

	disp();

	querySrc = location.search.substr(1);

	if (querySrc.length == 0) {
		querySrc = null;
	}

	if (querySrc) {
		get(querySrc);
	} else {
		help();
	}
}

function disp(text) {

	if (text == null) {
		text = "[pane] [get] [put] [watch] [preview] [close] [help]";
	}

	var top = document.body.scrollHeight;
	var div = document.createElement("div");

	var button = document.createElement("button");
	button.textContent="x";
	button.addEventListener("click", function() {current = div; close();});
	div.appendChild(button);

	var pre = document.createElement("pre");
	
	pre.addEventListener("dblclick", editorDblClick);
	pre.textContent = text;
	div.appendChild(pre);

	document.body.appendChild(div);

	window.scrollTo(0, top + 50);
}

function pane(src, text) {

	if (text == null) text = "[close]";

	var top = document.body.scrollHeight;
	var div = document.createElement("div");

	var button = document.createElement("button");
	button.textContent="x";
	button.addEventListener("click", function() {current = div; close();});
	div.appendChild(button);

	if (src != null) {
		var label = document.createElement("a");
		label.textContent = src;
		label.href = src;
		div.appendChild(label);
		div.appendChild(document.createElement("br"));
	}
	
	var pre = document.createElement("pre");
	pre.contentEditable = true;
	pre.addEventListener("focus", function() {current = div; paneSrc = src; paneText = pre;});
	pre.addEventListener("keypress", editorKeyUp);
	pre.addEventListener("dblclick", editorDblClick);
	pre.textContent = text;
	div.appendChild(pre);

	document.body.appendChild(div);


	window.scrollTo(0, top + 50);
}

function close() {

	if (!current) return;

	document.body.removeChild(current);
	current = null;
}

</script>

	<body onload=init()>
	</body>
</html>
